import React, { useState, useEffect, useRef } from 'react'
import './myscss/Barks.scss'

import axios from 'axios';

import { useNavigate } from 'react-router-dom';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Barks() {
    let navigate = useNavigate();
 
    const [list_phone, setList_phone] = useState([])




    let getPhone = async () => {
        let { data: { bankcard } } = await axios.get('/get_bankcard')
        setList_phone(bankcard)
    }

    let update_zt=async(item)=>{
        let {data}=await axios.post('/update_bankZt',{_id:item._id,zt:!item.zt})
        getPhone()
    }

   
    // 使用 useEffect 设置定时器
    useEffect(() => {
        getPhone()
       
    }, []); // 空数组作为第二个参数，表示只在组件挂载和卸载时运行
    return (
        <div id='Barks'>
            <div id="main">
               
                <div className='fans_length'>
                    <b onClick={() => { navigate('/mine') }}>&lt;</b><span>我的账户</span>
                </div>
                <div className="Barks">
                   {
                    list_phone.map((item,index)=>(
                        <div className='barksNum' key={item._id}>
                        <img src={item.bark.path} alt="" />
                        <div>
                            <h2>{item.bark.name}</h2>
                            <h4>{item.bark.cate}</h4>
                            <h3>{item.Bank_card_number}</h3>
                        </div>
                        <input type="radio" name='aa' checked={item.zt} onChange={(e)=>{update_zt(item)}} />
                    </div>
                    ))
                   }
                    <p onClick={() => { navigate('/MinPage/Bark_card') }}>+添加银行卡</p>
                </div>


            </div>
        </div>
    )
}

